<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '#' }">
                运动会比赛秩序管理
            </el-breadcrumb-item>
            <el-breadcrumb-item>
                <a href="#">编排竞赛秩序</a>
            </el-breadcrumb-item>
        </el-breadcrumb>

        <el-card class="arr-card">
            <el-row class="arr-select">
                <el-col :span="9" class="col-1">
                    <el-button type="success" @click="acquireRows">赛次表生成</el-button>
                    <el-button type="success" @click="StatisticValue">统计赛次</el-button>
                </el-col>
                <el-col :span="15" class="col-2">
                    <el-button type="warning" @click="arrangeoOder">编排</el-button>
                    <el-button type="primary" @click="exportExcel">秩序册导出</el-button>
                </el-col>
            </el-row>

            <el-table :data="currentPageData" border stripe ref="myTable">
                <el-table-column label="共60单项">
                    <el-table-column prop="pmid" label="号码" width="60">
                    </el-table-column>
                    <el-table-column prop="gridName" label="组别">
                    </el-table-column>
                    <el-table-column prop="sexName" label="性别">
                    </el-table-column>
                    <el-table-column prop="msidName" label="项目">
                    </el-table-column>
                    <el-table-column prop="plcnt" label="参赛人数">
                    </el-table-column>
                </el-table-column>
                <el-table-column label="预赛<及格>">
                    <el-table-column label="组数">
                        <template #default="scope">
                            {{ scope.row.grcnt1 === 0 ? '' : scope.row.grcnt1 }}
                        </template>
                    </el-table-column>
                    <el-table-column label="录取">

                        <template #default="scope">
                            {{ scope.row.plcnt1 === 0 ? '' : scope.row.plcnt1 }}
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column label="次/复赛">
                    <el-table-column label="组数">

                        <template #default="scope">
                            {{ scope.row.grcnt2 === 0 ? '' : scope.row.grcnt2 }}
                        </template>
                    </el-table-column>
                    <el-table-column label="录取">

                        <template #default="scope">
                            {{ scope.row.plcnt2 === 0 ? '' : scope.row.plcnt2 }}
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column label="复赛">
                    <el-table-column label="组数">

                        <template #default="scope">
                            {{ scope.row.grcnt3 === 0 ? '' : scope.row.grcnt3 }}
                        </template>
                    </el-table-column>
                    <el-table-column label="录取">

                        <template #default="scope">
                            {{ scope.row.plcnt3 === 0 ? '' : scope.row.plcnt3 }}
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column label="决赛">
                    <el-table-column label="组数">

                        <template #default="scope">
                            {{ scope.row.grcnt4 === 0 ? '' : scope.row.grcnt4 }}
                        </template>
                    </el-table-column>
                    <el-table-column label="录取">

                        <template #default="scope">
                            {{ scope.row.plcnt4 === 0 ? '' : scope.row.plcnt4 }}
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column label="操作" width="100"  fixed="right">
                    <template #default="scope">
                        <el-button type="primary" @click="showeditdialog(scope.row)">修改</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination class="paging" @size-change="handleSizeChange" @current-change="handlePageChange" background
                :page-sizes="[3, 5, 10, 15, 20, 50]" layout="total, prev, pager, next, jumper" :total="total"
                :page-size="queryObj.limit" :current-page="queryObj.page">
            </el-pagination>



            <!-- 修改页面 -->
            <el-dialog :title="titleName+'比赛 修改'" v-model="editdialogVisible" width="40%" draggable :before-close="handleClose">
                <el-form :model="editfrom" label-width="10" label-position="top">
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="参赛人数：">
                                <el-input v-model="editfrom.plcnt"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="预赛<及格>--组数：">
                                <el-input v-model="editfrom.grcnt1"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col class="col10-enroll" :span="11">
                            <el-form-item label="预赛<及格>--录取：">
                                <el-input v-model="editfrom.plcnt1"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="次/复赛--组数：">
                                <el-input v-model="editfrom.grcnt2"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col class="col10-enroll" :span="11">
                            <el-form-item label="次/复赛--录取：">
                                <el-input v-model="editfrom.plcnt2"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="复赛--组数：">
                                <el-input v-model="editfrom.grcnt3"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col class="col10-enroll" :span="11">
                            <el-form-item label="复赛--录取：">
                                <el-input v-model="editfrom.plcnt3"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="决赛--组数：">
                                <el-input v-model="editfrom.grcnt4"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col class="col10-enroll" :span="11">
                            <el-form-item label="决赛--录取：">
                                <el-input v-model="editfrom.plcnt4"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancelEdit">取 消</el-button>
                    <el-button type="primary" @click="editArrangeinfo">确 定</el-button>
                </div>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
import XLSX from 'xlsx'
export default {
    components: {
        XLSX,
    },
    data() {
        return {
            arrData: [],
            queryObj: {
                limit: 10,
                page: 1,
                query: " "
            },
            total: 0,
            currentPageData: [],
            editdialogVisible: false,
            editfrom: {},
            titleName:null,
        }
    },
    created() {
        this.getArrangeinfoList();
    },
    methods: {
        // 查询
        async getArrangeinfoList() {
            try {
                const result = await this.$http.post(this.BACKEND_URL + '/planmatch/getmsg');
                if (result.data.code == 0) {
                    this.arrData = result.data.data
                    this.total = this.arrData.length
                    this.fetchData()
                } else if (result.data.code == 500) {
                    console.log(result.data.msg)
                }
            } catch (error) {
                if (error === undefined) {
                    this.$message.error('连接错误-获取数据失败');
                }
            }
        },
        // 获取单个数据信息，修改
        async showeditdialog(info) {
            this.titleName = info.msidName
            this.editdialogVisible = true
            this.editfrom = info
        },
        async editArrangeinfo() {
            const result = await this.$http.post(this.BACKEND_URL + '/planmatch/updatemsg', this.editfrom)
            if (result.data.code == 0) {
                this.editdialogVisible = false
                this.getArrangeinfoList();
                this.$message.success('修改成功')
            } else if (result.data.code == 500) {
                this.getArrangeinfoList();
                this.$message.error(result.data.msg)
            }
        },
        cancelEdit() {
            this.editdialogVisible = false
            this.getArrangeinfoList()
        },
        handleClose(done) {
            this.getArrangeinfoList()
            done()
        },
        // 编排跳转
        arrangeoOder() {
            window.open(this.$router.resolve({ path: '/arrangeMatch' }).href, '_blank')
        },
        // 统计赛次
        StatisticValue() {
            this.$confirm('你确信要重新生成项目赛次吗?<br>此操作会删除已分配好比赛日程合成绩的信息！', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                dangerouslyUseHTMLString: true,
                type: 'warning',
                center: true
            }).then(async () => {
                await this.$http.post(this.BACKEND_URL + '/tplan/resetPlanMatch')
                this.getArrangeinfoList();
                this.$message({
                    type: 'success',
                    message: '统计成功!'
                });
            }).catch(() => {
            });
        },
        // 表格+数据导出
        async exportExcel() {
            try {
                const response = await this.$http.get(this.BACKEND_URL + '/planmatch/export', {
                    responseType: 'blob',
                });

                let downloadUrl = window.URL.createObjectURL(new Blob([response.data]));

                const link = document.createElement('a');
                link.href = downloadUrl;
                link.setAttribute('download', '秩序册S.xlsx');
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            } catch (error) {
                console.error('File export failed:', error);
            }
        },
        // 赛次表重置
        async acquireRows() {
            const result = await this.$http.post(this.BACKEND_URL + '/planmatch/creatPlan')
            if (result.data.code == 0) {
                this.getArrangeinfoList();
                this.$message({
                    type: 'success',
                    message: '生成成功!'
                });
            } else if (result.data.code == 500) {
                this.$message({
                    type: 'error',
                    message: '生成失败!'
                });
                console.log(result.data.msg)
            }
        },
        // 分页
        fetchData() {
            let startIndex = (this.queryObj.page - 1) * this.queryObj.limit;
            let endIndex = startIndex + this.queryObj.limit;
            this.currentPageData = this.arrData.slice(startIndex, endIndex);
        },
        handleSizeChange(newSize) {
            this.queryObj.limit = newSize
        },
        handlePageChange(newPage) {
            this.queryObj.page = newPage;
            let startIndex = (newPage - 1) * this.queryObj.limit;
            let endIndex = startIndex + this.queryObj.limit;
            this.currentPageData = this.arrData.slice(startIndex, endIndex);
        }
    }
}
</script>

<style lang="less" scoped>
:deep(.cell) {
    text-align: center;
}

.arr-card {
    margin-top: 15px;

    .arr-select {
        margin-bottom: 15px;

        .col-1 {
            text-align: left;
        }

        .col-2 {
            text-align: right;
        }
    }
}

.col10-enroll {
    margin-left: 20px;
}

.el-select {
    flex: 1;
}

.paging {
    margin-top: 15px;
}
</style>